(function () {
  var oul = document.querySelector(".list");
  var lis = document.querySelectorAll(".list li");

  // 将列表中的第一个元素，克隆到列表的最后一个
  function cloneFirstItem() {
    var firstItem = lis[0];
    var cloneItem = firstItem.cloneNode(true);
    oul.appendChild(cloneItem);
  }
  cloneFirstItem();

  // 滚动，每隔一段事件，将列表滚动到下一个位置
  function scrollItem(duration) {
    setInterval(moveNext, duration);
  }
  scrollItem(2000);

  var curIndex = 0; // 目前展示的是第几项
  var itemHeight = 30; // 每一项的高度
  // 将列表滚动到下一个位置
  function moveNext() {
    var fromHeight = curIndex * itemHeight; // 最开始的高度
    curIndex++;
    var toHeight = curIndex * itemHeight; // 下一次的滚动高度

    var totalDuration = 500; // 变化的时间
    var duration = 15; // 变化的间隔时间
    var times = Math.ceil(totalDuration / duration); // 变化的次数
    var dis = (toHeight - fromHeight) / times; // 每次变化的量
    // 开始计时器，缓慢增加scrollTop
    var timer = setInterval(function () {
      fromHeight += dis;
      if (fromHeight >= toHeight) {
        // from 高度超过 to高度的处理
        fromHeight = toHeight;
        clearInterval(timer); // 停止计时
        // 滚动到最后一条， 归零重新开始
        if (curIndex >= lis.length) {
          curIndex = 0;
        }
      }
      oul.scrollTop = fromHeight;
    }, duration);
  }
})();
